<template>
  <div class="chat-container">
    <div class="lover" @click="$router.push({ path: '/chat/lover' })">宝贝的聊天窗口</div>
    <div class="robot" @click="$router.push({ path: '/chat/gpt' })">
      <div>您可以尽情问我……</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoIndex'
}
</script>

<style scoped lang="less">
.chat-container {
  height: 85vh;
  padding: 40px 20px;

  .lover, .robot {
    width: 100%;
    height: 40%;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }

  .lover {
    margin-bottom: 40px;
    background-color: #fff;
  }

  .robot {
    background: url('@/assets/OpenAI.png') no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    color: #fff;
    justify-content: end;
    letter-spacing: 1px;
    padding-bottom: 10px;
  }
}
</style>
